<template>
  <div id="Laidainyujin">
    <div class="toptou">
      <div class="lefttop"><router-link to="/">&lt;</router-link></div>
      <div class="lefttop">来电预警</div>
      <div class="lefttop">
        <span class="iconfont icon-shezhi"></span>
      </div>
    </div>
    <div class="zonghe" v-for="item in laidianyujing" :key="item.id">
      <div class="tupian">
        <img :src="item.img" alt="" />
      </div>

      <div class="son">
        <h3>{{ item.name }}</h3>
        <a>{{ item.name2 }}</a>
      </div>

      <div class="zhaopian" v-for="item in laidiantop" :key="item.id">
        <div class="zuobian">
          <span :class="['iconfont', item.icon]"></span>
        </div>
        <div class="youbian">
          <b>{{ item.path }}</b>
          <a>{{ item.path2 }}</a>
        </div>
      </div>
      <br /><br />
      <!-- <div class="zhaopian">
      <div class="zuobian">
        <span class="iconfont icon-shenfenheshi"></span>
      </div>
      <div class="youbian">
        <b>来电预警</b>
        <a>准确识别并预警诈骗短信</a>
      </div>
    </div> -->
    </div>

    <p><b>提交举报</b></p>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      laidianyujing: [],
      laidiantop: [],
    };
  },
  created() {
    this.getlaidianyujing(), this.getlaidiantop();
  },
  methods: {
    getlaidianyujing() {
      axios({
        url: "http://localhost:3000/laidianyujing",
      }).then((res) => {
        this.laidianyujing = res.data;
        console.log(this.laidianyujing, "this.laidianyujing");
      });
    },
    getlaidiantop() {
      axios({
        url: "http://localhost:3000/laidiantop",
      }).then((res) => {
        // 把后端的数据赋给了laidiantop
        // console.log(res.data);
        this.laidiantop = res.data;
        console.log(this.laidiantop, "this.laidiantop");
      });
    },
  },
};
</script>

<style>
#Laidainyujin {
  height: 35rem;

  display: flex;
  flex-direction: column;
  align-items: center;
}

#Laidainyujin .toptou {
  width: 100%;
  height: 2.5rem;
  background-color: #3f56fa;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#Laidainyujin .toptou .lefttop {
  width: 30%;
  color: #fff;
  height: 2.5rem;
  display: flex;
  align-items: center;
}
#Laidainyujin .toptou .lefttop:nth-child(3) {
  display: flex;
  justify-content: flex-end;
}

#Laidainyujin .toptou .lefttop a {
  text-decoration: none;
  color: #fff;
}
#Laidainyujin .toptou .lefttop:nth-child(2) {
  display: flex;
  justify-content: center;
}

.zonghe {
  width: 100%;
  height: 15rem;
}
#Laidainyujin .tupian {
  width: 100%;
  height: 12rem;
}
#Laidainyujin .tupian img {
  width: 100%;
  height: 100%;
}

#Laidainyujin .son {
  width: 100%;
  height: 5rem;
  margin-top: -5px;
  color: #fff;
  background-color: #3f56fa;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#Laidainyujin .son a {
  color: #fff;
}

#Laidainyujin .zhaopian {
  width: 95%;
  height: 5rem;
  margin-left: 10px;
  margin-top: 15px;

  border-radius: 6px;
  background-color: #fff;
  display: flex;
}

#Laidainyujin .zhaopian .zuobian {
  width: 15%;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#Laidainyujin .zhaopian .youbian {
  width: 60%;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#Laidainyujin p {
  width: 95%;
  height: 2.5rem;
  color: #fff;
  position: absolute;
  bottom: 20px;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: dodgerblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
